<script setup lang="ts">
	import { nextTick, ref } from 'vue'
	import { fullUrl } from '@/utils/common'
	import { getBannerApi, getHotRecommendApi, getNoticeBartApi } from '@/api/home'
	import type { bannerItem, noticeBarItem } from '@/types/home'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import categoryGroup from '@/pages/index/components/categoryGroup.vue'
	import noticeBar from '@/pages/index/components/notice-bar.vue'
	import { getAllcategoryApi } from '@/api/catogory'
	import { useCartStore, useMemberStore } from '@/stores'
	import { getCartTotalNumApi } from '@/api/cart'
	import hotRecommend from '@/pages/index/components/hotRecommend.vue'
	import { pageUrl } from '@/utils/constants'

	//轮播图
	const bannerList = ref<bannerItem[]>([])
	const getBannerListData = async () => {
		const res = await getBannerApi()
		bannerList.value = res.result
		console.log('swiper',bannerList.value);
	}
	//分类
	const categoryList = ref()
	const getTopCategoryListData = async () => {
	  const res = await getAllcategoryApi().then((res)=>{
		   categoryList.value = res.result
	  })
	  //console.log('9999999',categoryList.value);
	  //console.log('10101010',fullUrl(categoryList.value[0].classify.goods[0].images));
	}
	
	//商品列表
	const shopGoodsListRef = ref()
	
	const getIndexData = () => {
	  return Promise.all([
	    getBannerListData(),
		getTopCategoryListData(),
	  ])
	}
	onLoad(() => {
	  getIndexData()
	})
	onShow(() => {
	  nextTick(() => {
		getIndexData()
	   // shopGoodsListRef.value.refresh()
	  })
	
	  const cartStore = useCartStore()
	  //首页初始化设置购物车角标
	  if (useMemberStore().profile) {
	    getCartTotalNumApi().then((res) => {
	      cartStore.setCartTotalNum(res.result)
	    })
	  } else {
	    cartStore.setCartTotalNum(0)
	  }
	  cartStore.setCartTabBadge()
	})
	
	//页面跳转部分
	const toShangpin = (id: string) => {
	  uni.navigateTo({
	    url: pageUrl['goods-detail']+'?id='+id,
	  })
	}
	const toLiucheng = () =>{
		uni.navigateTo({
		  url: pageUrl['others']
		})
	}
	const toBikan = () =>{
		uni.navigateTo({
		  url: pageUrl['bikan']
		})
	}
	const toKefu = () =>{
		uni.navigateTo({
		  url: pageUrl['kefu']
		})
	}
	const toMore = () =>{
		uni.navigateTo({
			url: pageUrl['category']
		})
	}
</script>
<template>
	<view>
		<view class="topNotice">禁止未成年人下单</view>
		<view class="swiperBox">
			<swiper style="height:400rpx" circular :indicator-dots="true" :autoplay="true" :interval="2000"
				:duration="1000">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<image :src="fullUrl(item.image)" mode="aspectFill" style="width:100%;height:400rpx"></image>
				</swiper-item>
			</swiper>
			<view
				class="menuBox">
				<view class="item" @tap="toLiucheng">
					<image src="../../static/images/car.png" style="width:70%;margin:3px;"></image>
					<view>购买流程</view>
				</view>
				<view class="item" @tap="toKefu">
					<image src="../../static/images/car.png" style="width:70%;margin:3px;"></image>
					<view>联系客服</view>
				</view>
				<view class="item" @tap="toBikan">
					<image src="../../static/images/car.png" style="width:70%;margin:3px;"></image>
					<view>下单必看</view>
				</view>
			</view>
		</view>
		<view style="width:100%;height:auto;padding:0px 20px;" v-for="(items,index1) in categoryList"
			:key="index1">
			<view
				style="width:100%;height:40px;border-bottom: 5px solid royalblue;display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;">
				<view style="width:25%;height:40px"></view>
				<view
					style="width:40%;height:40px;text-align: center;line-height: 40px;font-size:18px;font-weight: bolder;">
					<text style="color:blue">"</text>
					<text>{{items.classify.name}}</text>
					<text style="color:blue">"</text>
				</view>
				<view style="width:25%;height:40px;line-height: 45px;text-align:right">
					<text style="font-size:13px;color:#999" @tap="toMore">查看更多 >></text>
				</view>
			</view>
			<view style="width:100%;display: flex;flex-wrap: wrap;justify-content: space-between;">
				<view style="width:47%;background-color:#fff;margin-top:10px;border-radius:5px;padding-bottom: 10px;"
					v-for="(item,index) in items.classify.goods" :key="index">
					<image :src="fullUrl(item.images[0])" mode="aspectFill" style="width:100%;height:180px" @tap="toShangpin(item.id)"></image>
					<view style="margin:10px 5px;width:94%;overflow: hidden; height:30px;">{{item.name}}</view>
					<view style="display: flex;justify-content: space-between;padding:0 5px;"><text
							style="color:#f00;font-size:13px;">￥{{item.min_price}}</text><text style="color:blue;font-size:13px;" @tap="toShangpin(item.id)">购物车</text></view>
				</view>
			</view>
		</view>
	</view>
</template>
<style lang="scss">
	page {
		background-color: #f0f0f0;
	}
	.topNotice {
		width:100%;
		height:40px;
		line-height:42px;
		color:coral;
		font-size:18px;
		text-align:center;
		background-color: #ff0;
	}
	.swiperBox {
		width:100%;
		height:325px;
		padding:20px;
		background-color: #ffffff;
	}
	.menuBox {
		width:100%;
		height:70px;
		margin-top:10px;
		display:flex;
		flex-wrap: wrap;
		justify-content: space-around;
		.item {
			height:42px;
			text-align:center;
		}
	}
</style>